import { Component, OnInit } from '@angular/core';
import { SharedModule } from '../../../shared/shared.module';
import { CommonModule } from '@angular/common';
import { NzModalService } from 'ng-zorro-antd/modal';
import { ProjectEditModalComponent } from '../project-edit-modal/project-edit-modal.component';
import { Store } from '@ngxs/store';
import { ProjectAction } from '../../../store/project/project.action';
import { ResetForm } from '@ngxs/form-plugin';
import { HttpClient } from '@angular/common/http';
import { NzModalRef } from 'ng-zorro-antd/modal/modal-ref';
import { DeployService } from '../deploy.service';
import { Project } from '../entity/project';

@Component({
  selector: 'app-project',
  standalone: true,
  imports: [CommonModule, SharedModule],
  template: `
      <div>
          <button nz-button nzType="primary" (click)="openModal()">新建项目</button>
      </div>

      <nz-table #basicTable [nzData]="dataSet">
          <thead>
          <tr>
              <th>项目</th>
              <th>标签</th>
              <th>操作</th>
          </tr>
          </thead>
          <tbody>
          <tr *ngFor="let data of basicTable.data">
              <td>{{ data.name }}</td>
              <td>
                  @if (data.tags && data.tags.length > 0) {
                      @for (tag of data.tags|slice:0:3;track $index) {
                          <nz-tag nz-tooltip [nzTooltipTitle]="tag">{{ sliceTagName(tag) }}</nz-tag>
                      }
                      @if (data.tags.length > 3) {
                          <span>等</span>
                      }
                  }
              </td>
              <td>
                  <button nz-button nzType="primary" nzSize="small" [routerLink]="'/deploy/'+data.id">进入</button>
                  <nz-divider nzType="vertical"></nz-divider>
                  <a (click)="openModal(data)">编辑</a>
                  <nz-divider nzType="vertical"></nz-divider>
                  <a (click)="delete(data)">删除</a>
              </td>
          </tr>
          </tbody>
      </nz-table>
  `,
  styles: ``,
})
export class ProjectComponent implements OnInit {
  dataSet: Project[] = [];

  constructor(private modal: NzModalService,
              private store: Store,
              private http: HttpClient,
              private deployService: DeployService) {
  }

  ngOnInit() {
    this.load();
  }

  openModal(data?: Project) {
    this.store.dispatch(new ResetForm({path: 'project.modal', value: data})).subscribe(() => {
      let modalRef: NzModalRef = this.modal.create({
        nzTitle: data ? '编辑' : '创建',
        nzContent: ProjectEditModalComponent,
        nzMaskClosable: false,
        nzWidth: '1400px',
        nzFooter: [
          {
            type: 'primary',
            label: '确定',
            disabled: instance => instance ?
                (instance.validateForm.invalid || !instance.validateForm.dirty) : true,
            onClick: () => this.store.dispatch(new ProjectAction.SaveModal()).subscribe((r: any) => {
              this.load();
              modalRef.triggerCancel();
            }),
          },
          {type: 'default', label: '取消', onClick: () => modalRef.triggerCancel()},
        ],
      });
    });
  }

  load() {
    this.http.get(`/api/deploy`).subscribe((r: any) => {
      console.log('r', r);
      this.dataSet = r;
    });
  }

  delete(data: Project) {
    this.http.delete(`/api/deploy/${data.id}`).subscribe(() => this.load());
  }

  sliceTagName(tag: any): string {
    return this.deployService.sliceTagName(tag);
  }
}
